<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <link rel="stylesheet" href="./css/login.css">
    <!-- css\login.css -->
</head>

<body>
    <div class="container">
        <div class="form-box">
            <!-- 注册 -->
            <div class="register-box hidden">
                <h1>register</h1>
                <input type="text" placeholder="用户名">
                <input type="email" placeholder="邮箱">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码">
                <button>注册</button>
            </div>
            <!-- 登录 -->
            <div class="login-box ">
                <h1>login</h1>
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
                <button><a href="index.html">登录</a></button>
            </div>
        </div>
        <div class="con-box left">
            <h2>欢迎进入注册页面</h2>
            <span>请在此界面注册</span>
            <img src="./images/Q3.jpg" alt="Q" class="Q">
            <br>
            <span>已有账号！</span>
            <button id="login">登录</button>
        </div>
        <div class="con-box right">
            <h2>欢迎进入登陆页面</h2>
            <span>请在此界面登录账号</span>
            <img src="./images/Q2.jpg" class="Q" alt="">
            <br>
            <span>没有账号！</span>
            <button id="register">注册</button>
        </div>
    </div>

    <script>
        //找到要操作的元素
        let login = document.getElementById('login');
        let register = document.getElementById('register');
        let form_box = document.getElementsByClassName('form-box')[0];
        let login_box = document.getElementsByClassName('login-box')[0];
        let register_box = document.getElementsByClassName('register-box')[0];

        //注册按钮点击事件
        register.addEventListener('click',()=>{
            form_box.style.transform='translateX(80%)';
            login_box.classList.add('hidden');
            register_box.classList.remove('hidden');
        })
        //登陆界面点击事件
        login.addEventListener('click',()=>{
            form_box.style.transform='translateX(0%)';
            register_box.classList.add('hidden');
            login_box.classList.remove('hidden');
        })
    </script>

</body>

</html>